<template>
    <section class="yssf-contain">
        <div class="swiper-div">
            <van-swipe class="my-swipe" :loop="true" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="https://resource.bencaogangmu.online/yssf/anli/banner1.png"/>
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://resource.bencaogangmu.online/yssf/anli/banner2.png"/>
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://resource.bencaogangmu.online/yssf/anli/banner3.png"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--技术-->
        <div class="tech-div content-div">
            <TitleCon title="技术范围"></TitleCon>
            <van-tabs v-model:active="active">
                <van-tab title="前端">
                    <van-list>
                        <van-cell
                            v-for="item in Frontend"
                            :key="item.id"
                            :title="item.id +'. '+ item.desc"
                        />
                    </van-list>
                </van-tab>
                <van-tab title="后端">
                    <van-list>
                        <van-cell
                            v-for="item in Backend"
                            :key="item.id"
                            :title="item.id +'. '+ item.desc"
                        />
                    </van-list>
                </van-tab>
                <van-tab title="运维">
                    <van-list>
                        <van-cell
                            v-for="item in Operation"
                            :key="item.id"
                            :title="item.id +'. '+ item.desc"
                        />
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>
        <!--案例-->
        <div class="anli-div content-div">
            <TitleCon title="案例展示"></TitleCon>
            <van-grid :column-num="2">
                <van-grid-item v-for="item in anlilist" :key="value" :icon="item.img" :text="item.name" />
            </van-grid>
        </div>
        <!--我们的优势-->
        <div class="anvant-div content-div">
            <TitleCon title="我们的优势"></TitleCon>
            <div class="one-anvant" v-for="item in advantage">
                <p>
                    <img class="advant-img" :src="item.img" :alt="item.id"/>
                    <span>{{ item.title }}</span>
                </p>
                <van-list>
                    <van-cell
                        v-for="desclist in item.desc"
                        :title="desclist.key + desclist.desc"
                    />
                </van-list>
            </div>
        </div>
        <!--联系方式-->
        <div class="lianxi-div content-div">
            <TitleCon title="联系我们"></TitleCon>
            <van-list>
                <van-cell
                    v-for="item in userinfo"
                    :title="item.key + item.value"
                    @click="handleContact(item.id)"
                />
            </van-list>
        </div>
    </section>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import { Tab, Tabs } from 'vant';
import { Grid, GridItem } from 'vant';
import { List, Cell } from 'vant';
import { ActionSheet } from 'vant';
import { Toast } from 'vant';

import TitleCon from "/src/components/TitleCom.vue";
export default {
    name: "Home",
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        [ActionSheet.name]: ActionSheet,
        VanList: List,
        VanCell: Cell,
        TitleCon,
        Toast
    },
    data () {
        return {
            active: 0,
            Frontend:[
                {id:1, desc:"可独立提供前端静态模板开发"},
                {id:2, desc:"也可以提供前端+接口对接版本"},
                {id:3, desc:"在现有项目上，提供重构建议和优化方案"},
                {id:4, desc:"服务范围：网站，h5，小程序和uniapp的页面开发"},
                {id:5, desc:"框架类型：vue/angular/react/jquery/canvas等项目类型"},
            ],
            Backend:[
                {id:1, desc:"熟练进行网站，h5，小程序和uniapp的api接口开发。"},
                {id:2, desc:"熟悉ThinkPHP/CodeIgniter/Laravel/workmen框架"},
                {id:3, desc:"熟悉Dedecms/帝国cms/fastadmin等常用开源项目"},
                {id:4, desc:"支持现有网站，h5,小程序的优化和完善"},
            ],
            Operation: [
                {id:1, desc:"线上lnmp环境配置，部署"},
                {id:2, desc:"熟练使用Docker容器，宝塔等"},
                {id:3, desc:"域名申请，备案，SSL证书"},
                {id:4, desc:"网站程序和数据库内容备份"},
                {id:5, desc:"常用的服务器，短信，CDN，OSS等产品的配置使用"},
            ],
            anlilist :[
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/morehayyierlife_wechat.jpg",
                    name:"幸福嘉倍小程序"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/https___morehappierlife.com_.png",
                    name:"幸福嘉倍官网"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/funtask.site_.png",
                    name:"funtask办公软件"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/wechat_frinend_node.jpg",
                    name:"微友笔记小程序"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/zhenshuo.jpg",
                    name:"真说小程序"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/huanjiekongjian.jpg",
                    name:"幻捷空间"
                },
                {
                    img:"https://resource.bencaogangmu.online/yssf/anli/yunchagnweilai.jpg",
                    name:"云畅未来校园服务"
                }

            ],
            advantage : [
                { id: 1,
                    img: 'https://resource.bencaogangmu.online/yssf/anli/%E8%B4%A8%E9%87%8F.png',
                    title: '质量',
                    desc:[
                        {key:"经验丰富：", desc:"我们的成员之间的编码习惯已经充分磨合，对于项目的讨论，开发，测试，运维流程已有成熟的规定"},
                        {key:"项目定制：", desc:"我们不是模板化开发，会有专职的前端和后端跟进项目"},
                    ]
                },
                { id: 2,
                    img: 'https://resource.bencaogangmu.online/yssf/anli/%E4%BC%98%E6%83%A0%20copy.png',
                    title: '高性价比',
                    desc:[
                        {key:"日常开发：", desc:"当您有新的开发需求，我们可以弹性增加工作人员，帮您按时保量完成项目"},
                        {key:"日常维护：", desc:"如果只需定期更新软件，我们可以配置前端和后端各一名，按量付费，您们只需专注主营业务"},
                    ]
                },
                { id: 3,
                    img: 'https://resource.bencaogangmu.online/yssf/anli/%E6%93%8D%E4%BD%9C_%E5%BE%AA%E7%8E%AF2.png',
                    title: '可持续',
                    //desc: '在万物互联的时代，我们协助进行软件开发，您们只需专注主营业务，轻装上阵远行'
                    desc:[
                        {key:"口碑至上：", desc:"在万物互联的时代，我们协助进行软件开发，您们只需专注主营业务，轻装上阵远行"},
                    ]
                }
            ],
            userinfo:[
                {id:1, key:"复制微信", value:""},
                {id:2, key:"拨打电话", value:""},
                {id:3, key:"邮箱: ", value:"my76572@163.com"},
            ],
        }
    },
    methods: {
        onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.show = false;
            Toast(item.name);
        },
        handleContact(id){
           if(id === 1){
               // 创建 input 元素
               let input = document.createElement('input');
               // 赋值内容
               input.value = '17310079960';
               // 插入文档流
               document.body.appendChild(input);
               // 选中值
               input.select();
               // 执行复制
               document.execCommand('Copy');
               // 移除元素
               document.body.removeChild(input);
               Toast('复制成功');
           }else if( id === 2){
               //window.location.href = '17310079960'
               this.callPhone('17310079960')
            }
        },
        callPhone(phoneNumber) {
            window.location.href = "tel:" + phoneNumber;
        },
    }

}
</script>

<style lang="less">
.yssf-contain{
    background-color:#fafafa;
    .my-swipe .van-swipe-item {
        color: #fff;
        img{
            max-width: 750px;
            width:100%;
        }

    }

    //技术范围
    .tech-div {
        min-height: 304px;
        //margin-top:0px;!important;
        .vant-list{
            margin-bottom:10px;
            .van-cell{
                .van-cell__title{
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }

    //案例div
    .anli-div{
        .van-icon__image{
            width: 4em;
            height: 4em;
        }
        .van-grid-item__text{
            font-size:14px;
        }
    }
    //我们的优势
    .anvant-div{
        width:100%;
        .one-anvant{

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            background-color:#FFFFFF;
            max-width:96%;
            margin: 0 auto;
            margin-top: 5px;
            margin-bottom: 5px;
            padding-bottom:15px;
            border-radius: 20px;
            border:1px solid #c8c9cc;
            p{
                display:flex;
                justify-content:center;
                line-height: 30px;
                img{
                    width:30px;
                }
            }

        }
    }
}
</style>